<template>
  <div class="overall-assessment">
    <box title="总体评估">
      <div class="main">
        <div class="left">
          <subBox title="28d评估指标">
            <assessment-indicators></assessment-indicators>
          </subBox>
        </div>
        <div class="right">
          <subBox title="历史评估指标">
            <historical-assessment-indicators></historical-assessment-indicators>
          </subBox>
        </div>
        <div class="left">
          <subBox title="28d评估情况">
            <annotatedGraph></annotatedGraph>
          </subBox>
        </div>
        <div class="right">
          <subBox title="历史评估情况">
            <historicalAssessment></historicalAssessment>
          </subBox>
        </div>
      </div>
    </box>
  </div>
</template>
  <script>
import box from "../box.vue";
import subBox from "../subBox.vue";
import assessmentIndicators from "./assessmentIndicators.vue";
import historicalAssessmentIndicators from "./historicalAssessmentIndicators.vue";
import historicalAssessment from "./historicalAssessment.vue";
import annotatedGraph from "./annotatedGraph.vue";

export default {
  components: {
    box,
    subBox,
    assessmentIndicators,
    historicalAssessmentIndicators,
    historicalAssessment,
    annotatedGraph,
  },
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
  <style scoped lang='scss'>
.overall-assessment {
  width: vw(606px);
  height: vh(600px);
  border: 1px solid rgba(66, 167, 182, 0.5);
  .main {
    padding-top: vh(20px);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .left {
      width: vw(250px);
      margin-right: vw(26px);
    }
    .right {
      width: vw(288px);
    }
  }
}
</style>
  